<template>
    <div>

      <el-card>

        <el-form :model="queryParams" ref="queryForm" :inline="true" v-show="showSearch" label-width="100px">
          <el-form-item label="订单编号" prop="orderSn">
            <el-input
              v-model="queryParams.orderSn"
              placeholder="请输入订单编号"
              clearable
              size="small"
              @keyup.enter.native="handleQuery"
            />
          </el-form-item>

          <el-form-item label="收货人姓名" prop="shippingUser">
            <el-input
              v-model="queryParams.shippingUser"
              placeholder="请输入收货人姓名"
              clearable
              size="small"
              @keyup.enter.native="handleQuery"
            />
          </el-form-item>
          <el-form-item label="省" prop="province">
            <el-input
              v-model="queryParams.province"
              placeholder="请输入省"
              clearable
              size="small"
              @keyup.enter.native="handleQuery"
            />
          </el-form-item>
          <el-form-item label="市" prop="city">
            <el-input
              v-model="queryParams.city"
              placeholder="请输入市"
              clearable
              size="small"
              @keyup.enter.native="handleQuery"
            />
          </el-form-item>
          <el-form-item label="区" prop="district">
            <el-input
              v-model="queryParams.district"
              placeholder="请输入区"
              clearable
              size="small"
              @keyup.enter.native="handleQuery"
            />
          </el-form-item>

          <el-form-item label="支付方式" prop="paymentMethod">
            <el-select v-model="queryParams.paymentMethod" placeholder="请选择支付方式'" clearable size="small">
              <el-option label="1现金" value="1" />
              <el-option label="2余额" value="2" />
              <el-option label="4支付宝" value="3" />
              <el-option label="5微信" value="4" />
            </el-select>
          </el-form-item>






          <el-form-item label="订单状态" prop="orderStatus">
            <el-select v-model="queryParams.orderStatus" placeholder="请选择'订单状态'" clearable size="small">
              <el-option label="待付款" value="1" />
              <el-option label="代发货" value="2" />
              <el-option label="待收货" value="3" />
              <el-option label="已收货" value="4" />
              <el-option label="交易取消" value="5" />
              <el-option label="删除订单" value="6" />
              <el-option label="取消订单" value="7" />
              <el-option label="退货" value="8" />
            </el-select>
          </el-form-item>



          <el-form-item>
            <el-button type="cyan" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
            <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
          </el-form-item>
        </el-form>

        <el-row :gutter="10" class="mb8">

          <el-col :span="1.5">
            <el-button
              type="warning"
              icon="el-icon-download"
              size="mini"
              @click="handleExport"
              v-hasPermi="['system:master:export']"
            >导出</el-button>
          </el-col>
          <right-toolbar :showSearch.sync="showSearch" @queryTable="getList"></right-toolbar>
        </el-row>

        <el-table v-loading="loading" border style="width: 100%" :data="masterList" @selection-change="handleSelectionChange">
          <el-table-column type="selection" width="55" align="center" />
          <!--<el-table-column label="订单ID" align="center" prop="orderId" />-->
          <el-table-column label="订单编号" align="center" fixed prop="orderSn" />
          <el-table-column label="下单人ID" align="center" prop="customerId" />
          <el-table-column label="收货人姓名" align="center" prop="shippingUser" />
          <el-table-column label="省" align="center" prop="province" />
          <el-table-column label="市" align="center" prop="city" />
          <el-table-column label="区" align="center" prop="district" />
          <el-table-column label="地址" align="center" prop="address" />
          <el-table-column label="支付方式" align="center" prop="paymentMethod" >
            <template slot-scope="scope">
              <el-tag
                :type="scope.row.paymentMethod === 1 ? 'primary' : scope.row.paymentMethod === 2 ? 'success' : 'warning'"
                disable-transitions>{{scope.row.paymentMethod ===1 ? '支付宝' : scope.row.paymentMethod ===2 ? '微信' : '线下'}}</el-tag>
            </template>
          </el-table-column>
          <el-table-column label="订单金额" align="center" prop="orderMoney" />
          <el-table-column label="优惠金额" align="center" prop="districtMoney" />
          <el-table-column label="运费金额" align="center" prop="shippingMoney" />
          <el-table-column label="支付金额" align="center" prop="paymentMoney" />
          <el-table-column label="快递公司名称" align="center" prop="shippingCompName" />
          <el-table-column label="快递单号" align="center" prop="shippingSn" />
          <el-table-column label="发货时间" align="center" prop="shippingTime" width="180">
            <template slot-scope="scope">
              <span>{{ parseTime(scope.row.shippingTime, '{y}-{m}-{d}') }}</span>
            </template>
          </el-table-column>
          <el-table-column label="支付时间" align="center" prop="payTime" width="180">
            <template slot-scope="scope">
              <span>{{ parseTime(scope.row.payTime, '{y}-{m}-{d}') }}</span>
            </template>
          </el-table-column>
          <el-table-column label="收货时间" align="center" prop="receiveTime" width="180">
            <template slot-scope="scope">
              <span>{{ parseTime(scope.row.receiveTime, '{y}-{m}-{d}') }}</span>
            </template>
          </el-table-column>
          <el-table-column label="订单状态" align="center" prop="orderStatus" />
          <el-table-column label="订单状态" align="center" prop="orderStatus" >
            <template slot-scope="scope">
              <el-tag
                :type="scope.row.orderStatus === 1 ? 'primary' : scope.row.orderStatus === 2 ? 'primary' : scope.row.orderStatus === 3 ? 'primary' : scope.row.orderStatus === 4 ? 'primary' : scope.row.orderStatus === 5 ? 'success' : scope.row.orderStatus === 6 ? 'info' : scope.row.orderStatus === 7 ? 'warning' :  'danger'"
                disable-transitions>{{scope.row.orderStatus ===1 ? '待付款' : scope.row.orderStatus ===2 ? '代发货' : scope.row.orderStatus ===3 ? '待收货' : scope.row.orderStatus ===4 ? '已收货' : scope.row.orderStatus ===5 ? '交易取消' : scope.row.orderStatus ===6 ? '删除订单' : scope.row.orderStatus ===7 ? '取消订单' : '退货' }}</el-tag>
            </template>
          </el-table-column>
          <el-table-column label="订单积分" align="center" prop="orderPoint" />
          <el-table-column label="发票抬头" align="center" prop="invoiceTime" />
          <el-table-column label="最后修改时间" align="center" prop="modifiedTime" width="180">
            <template slot-scope="scope">
              <span>{{ parseTime(scope.row.modifiedTime, '{y}-{m}-{d}') }}</span>
            </template>
          </el-table-column>

        </el-table>

        <pagination
          v-show="total>0"
          :total="total"
          :page.sync="queryParams.pageNum"
          :limit.sync="queryParams.pageSize"
          @pagination="getList"
        />



      </el-card>

    </div>
</template>

<script>
  import {  productqueryById, superOrderMasterList, superOrderxport } from "@/api/super/goodsstore";
    export default {
        name: "superorder",
      data(){
          return{
            // 遮罩层
            loading: true,
            // 选中数组
            ids: [],
            // 非单个禁用
            single: true,
            // 非多个禁用
            multiple: true,
            // 显示搜索条件
            showSearch: true,
            // 总条数
            total: 0,
            // 订单主表格数据
            masterList: [],
            // 弹出层标题
            title: "",
            // 是否显示弹出层
            open: false,
            // 查询参数
            queryParams: {
              pageNum: 1,
              pageSize: 10,
              orderSn: null,
              customerId: null,
              shippingUser: null,
              province: null,
              city: null,
              district: null,
              address: null,
              paymentMethod: null,
              orderMoney: null,
              districtMoney: null,
              shippingMoney: null,
              paymentMoney: null,
              shippingCompName: null,
              shippingSn: null,
              shippingTime: null,
              payTime: null,
              receiveTime: null,
              orderStatus: null,
              orderPoint: null,
              invoiceTime: null,
              modifiedTime: null,
              productId: null,
              productIdone:null
            },
            // 表单参数
            form: {},
            defaultDictType:"",
          }
      },

      created() {
          this.getList();
      },
      methods: {

        /** 查询订单主列表 */
       getList(){

          const productId = parseInt(this.$route.query.productId);
          this.queryParams.productIdone = productId
          superOrderMasterList(this.queryParams).then(response => {
            this.masterList = response.rows;
          this.total = response.total;
          this.loading = false;
        });
        },
        // 取消按钮
        cancel() {
          this.open = false;
          this.reset();
        },
        // 表单重置
        reset() {
          this.form = {
            orderId: null,
            orderSn: null,
            customerId: null,
            shippingUser: null,
            province: null,
            city: null,
            district: null,
            address: null,
            paymentMethod: null,
            orderMoney: null,
            districtMoney: null,
            shippingMoney: null,
            paymentMoney: null,
            shippingCompName: null,
            shippingSn: null,
            createTime: null,
            shippingTime: null,
            payTime: null,
            receiveTime: null,
            orderStatus: 0,
            orderPoint: null,
            invoiceTime: null,
            modifiedTime: null
          };
          this.resetForm("form");
        },
        /** 搜索按钮操作 */
        handleQuery() {
          this.queryParams.pageNum = 1;
          this.getList();
        },
        /** 重置按钮操作 */
        resetQuery() {
          this.resetForm("queryForm");
          this.handleQuery();
        },
        // 多选框选中数据
        handleSelectionChange(selection) {
          this.ids = selection.map(item => item.orderId)
          this.single = selection.length!==1
          this.multiple = !selection.length
        },

        /** 导出按钮操作 */
        handleExport() {
          const queryParams = this.queryParams;
          this.$confirm('是否确认导出所有订单主数据项?', "警告", {
            confirmButtonText: "确定",
            cancelButtonText: "取消",
            type: "warning"
          }).then(function() {
            return superOrderxport(queryParams);
          }).then(response => {
            this.download(response.msg);
        }).catch(function() {});
        }
      }

    }
</script>

<style scoped>

</style>
